<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <h2>个人资料</h2>
        </div>
      </template>
      
      <div class="profile-content">
        <div class="avatar-section">
          <el-avatar :size="100" :src="profile.avatar" />
          <el-button type="primary" @click="uploadAvatar">更换头像</el-button>
        </div>
        
        <el-form :model="profile" label-width="100px" class="profile-form">
          <el-form-item label="邮箱">
            <el-input v-model="profile.email" disabled />
          </el-form-item>
          
          <el-form-item label="昵称">
            <el-input v-model="profile.nickname" placeholder="请输入昵称" />
          </el-form-item>
          
          <el-form-item label="个人简介">
            <el-input
              v-model="profile.bio"
              type="textarea"
              :rows="4"
              placeholder="请输入个人简介"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="saveProfile">保存</el-button>
            <el-button @click="resetProfile">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'

interface Profile {
  email: string
  nickname: string
  bio: string
  avatar: string
}

const authStore = useAuthStore()

const profile = reactive<Profile>({
  email: '',
  nickname: '',
  bio: '',
  avatar: ''
})

const uploadAvatar = () => {
  // 实现头像上传功能
  ElMessage.info('头像上传功能开发中')
}

const saveProfile = async () => {
  try {
    // 保存个人资料到 Supabase
    ElMessage.success('个人资料保存成功')
  } catch (error) {
    ElMessage.error('个人资料保存失败')
  }
}

const resetProfile = () => {
  // 重置个人资料
  profile.nickname = ''
  profile.bio = ''
  ElMessage.success('个人资料已重置')
}

onMounted(() => {
  // 加载用户个人资料
  if (authStore.user) {
    profile.email = authStore.user.email || ''
  }
})
</script>

<style scoped lang="scss">
.profile-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.profile-card {
  .card-header {
    h2 {
      margin: 0;
      color: var(--el-text-color-primary);
    }
  }
}

.profile-content {
  padding: 20px 0;
}

.avatar-section {
  text-align: center;
  margin-bottom: 30px;
  
  .el-avatar {
    margin-bottom: 15px;
  }
}

.profile-form {
  max-width: 400px;
  margin: 0 auto;
}
</style>